<template>
<div>
	<!-- <div class="g_top_box">
		<div class="g_right_box">
			<Button @click="download" style="margin-right:20px;">下载案例</Button>
			<Button type="primary" @click="import_data">导入数据</Button>
			
		</div> 
		<div class="g_left_box"><h4>银行记账列表</h4></div>
	</div> -->
	<content_top title="公告消息"></content_top>
	
	<div class="g_box">
		<div class="g_head">
			<h3>筛选查询</h3>
			<div class="g_box_right">
				<ButtonGroup class="g_act_box">
					<Button @click="qurey">查询结果</Button>
				</ButtonGroup>
				<div class="g_other">
					<a>收起筛选</a>
				</div>
			</div>
		</div>
		<div class="g_box_con" style="padding:20px;">
			<Form  :label-width="90" style="width: 100%" inline>
				<FormItem label="关键词：">
					<Input v-model="filter.key_val" placeholder="关键词" style="width: 180px"></Input>
				</FormItem>
				<FormItem label="发布人员：">
					<Input v-model="filter.people" placeholder="全部" style="width: 180px"></Input>
				</FormItem>
				<FormItem label="发布时间">
					<DatePicker type="month" placeholder="请选择日期" style="width: 180px" @on-change="month_change"></DatePicker>
				</FormItem>
			</Form>
		</div>
	</div> 
	
	<div class="g_box g_message_box">
		<div class="g_head">
			<h3>数据列表</h3>
			<div class="g_box_right">
				<ButtonGroup class="g_act_box">
					<Button @click="handleSendGongao">发送公告</Button>
				</ButtonGroup>
			</div>
		</div>
		<div class="g_box_con">
			<div class="message_box" v-for="(item,id) in list" :key="id">
				<div class="message_card">
					<div style="position:relative;padding: 12px 0;border-bottom: 1px solid #e4e4e4;">
					<Checkbox class="mess_checkbox" v-model="item.is_ckecked" @on-change="handleCheckbox(id)"></Checkbox>
						发布人员：{{item.received}}    发送时间：{{item.date}}     接收对象：{{item.people}} 
						<Button style="position:absolute;right:40px;top:0px;" @click="remove(id)">删除</Button>
					</div>
					<p class="message_card_p" >{{item.content}}</p>
				</div>
			</div>
		</div>
	</div>

	<info_box v-model="show"></info_box>

</div>
</template>

<script>
import content_top from '@/themes/components/content_top';
import info_box from './info';

export default {
    name: 'gonggao_list',
    data () {
		let self = this;
        return {
			show: false,
			list:[
				{
					id: '0',
					is_ckecked: true,
					date: '2019-04-09 15:47:44',
					people: '广州',
					received: '董事长',
					content: '2019年4月财务报表已出，请各团队负责人查阅核对。',
				},
				{
					id: '1',
					is_ckecked: true,
					date: '2019-05-09 15:47:44',
					people: '深圳',
					received: '蔡徐坤',
					content: '2019年5月财务报表已出，请各团队负责人查阅核对。'
				},
				{
					id: '2',
					is_ckecked: false,
					date: '2019-06-09 15:47:44',
					people: '深圳',
					received: '蔡徐坤',
					content: '2019年5月财务报表已出，请各团队负责人查阅核对。'
				},
				{
					id: '3',
					is_ckecked: true,
					date: '2019-06-09 15:47:44',
					people: '深圳',
					received: '蔡徐坤',
					content: '2019年5月财务报表已出，请各团队负责人查阅核对。'
				},
			],
			filter:{
				key_val:'',
				people:'',
				date_month:''
			},
			removeIds:[]
        };
	},
	components:{
		content_top,
		info_box,
	},
	created(){
		this.load_data();
	},
	methods:{
		handleSendGongao() {
			this.show = !this.show;
		},
		load_data(){
			
			
			// var self = this;
			// var postdata = {
			// 	page: this.page,
			// 	info: this.info,
			// }
			
			// Whttp.load('User/Company/get_list',postdata,function(result){
			// 	self.list = result.list;

			/**
			 *  后台请求到初始选中的数据 is_ckecked
			 *  */
			this.list.forEach((item,id) =>{
				if ( item.is_ckecked ) {
					this.removeIds.push(id);
				}
			})
			console.log(this.removeIds);


			// });
		},
		qurey(){
			this.load_data();
		},
		month_change(date){
			this.filter.date_month =  date;
		},
		handleCheckbox(val) {

			this.removeIds.push(val);

			this.list.forEach((item,id) =>{
				if ( id == val.toString()) {
					if (!item.is_ckecked) {
						this.removeIds = this.removeIds.filter(item => item !== val);
					}
				}
			})
			/**
			 *  过滤后被选中的数据 removeIds
			 *  */
			console.log(this.removeIds);
		},
		remove(id){
			var self = this;
			if(!confirm('是否删除')){
				return false;
			}
			var postdata = {
				id:id
			};
			Whttp.load('Chuna/Bank/del',postdata,function(result){
				self.load_data();
				self.$Message.info('删除成功');
			});
		}
	}
};
</script>
<style scoped>
.price{
	color: red;
    margin: 0 5px;
}
.g_message_box{
	border: 0;
	margin: 15px;
}
.g_message_box .g_head{
	border: 1px solid #e4e4e4;
}
.message_box{
	padding-left: 50px;
	margin-top: 10px;
    margin-bottom: 10px;
    border: 1px solid #e4e4e4;
}
.message_card{
	position: relative;
	padding: 20px;
}
.mess_checkbox{
	position: absolute;
    z-index: 99;
    top: 10px;
    left: -45px;
}
.message_card .message_card_p{
	margin:15px 0 40px;
}
</style>